<template>
    <div class="box">
        <div class="inner-box">
            <div class="name">
                {{question.name}}
            </div>
            <div class="limit">
                <span>Time Limit: {{question.timeLimit}} ms</span>
                <span style="margin-left: 50px">Memory Limit:  {{question.memoryLimit}}M</span>
            </div>
            <div class="des">
                <h2>Description</h2>
                <p>{{question.des}}</p>
            </div>
            <div class="des">
                <h2>Input</h2>
                <p>{{question.input}}</p>
            </div>
            <div class="des">
                <h2>output</h2>
                <p>{{question.output}}</p>
            </div>
            <div class="des">
                <h2>sampleInput</h2>
                <p v-html="question.sampleInput"></p>
            </div>
            <div class="des">
                <h2>sampleOutput</h2>
                <p v-html="question.sampleOutput"></p>
            </div>
            <div class="address">
                题目地址： <a :href="question.url">{{question.url}}</a>
            </div>
        </div>
    <foot></foot>
    </div>
</template>

<script>
    import foot from "../../components/common/foot";
    import {request} from "../../network/request";
    export default {
        name: "question",
        data(){
            return {
                question:{}
            }
        },
        methods: {

        },
        mounted() {
            let id = sessionStorage.getItem("questionID");
            console.log(id);
            request({
                url:"/question/getAlgorithmQuestionById",
                method: "post",
                params:{
                    id: id
                }
            }).then(res=>{
                console.log(res.data);
                this.question = res.data;
                //alert(res.data);

            }).catch(err=>{
                //alert(err);
                console.log(err);
            });
        },
        components:{
            foot
        }
    }
</script>

<style scoped>
    .box{
        width: 100%;

        height: 1000px;
    }
    .inner-box{
        width: 1000px;

        margin: 0 auto;
        background-color: #ffffff;
        padding: 10px;
    }
    .inner-box .name{
        padding-top: 30px;
        width: 100%;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
    }
    .inner-box .limit{
        width: 100%;
        text-align: center;
        font-weight: bold;
        padding-top: 10px;
    }
    .inner-box .des h2{
        height: 40px;
        padding-bottom: 10px;
        margin-top: 20px;
    }
    .inner-box .des p{
        line-height: 30px;
    }
    .inner-box .address{
        padding: 20px 20px 20px 0px;
        margin-bottom: 50px;
    }

</style>